<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <div class="app-container">
    <el-form ref="form"
             :model="params"
             :rules="rules"
             label-width="100px">
      <!-- 搜索 -->
      <el-row :gutter="10">
        <el-col :xs="24"
                :sm="20"
                :md="12"
                :lg="6"
                :xl="4">
          <el-form-item :label="tf('reportName')"
                        label-width="120px">
            <el-input v-model="params.reportName"
                      clearable
                      :placeholder="tf('reportName')"
                      class="filter-item" />
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="20"
                :md="12"
                :lg="6"
                :xl="4">
          <el-form-item :label="tf('reportCode')"
                        label-width="120px">
            <el-input v-model="params.reportCode"
                      clearable
                      :placeholder="tf('reportCode')"
                      class="filter-item" />
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="20"
                :md="12"
                :lg="6"
                :xl="4">
          <el-form-item :label="tf('reportType')"
                        label-width="120px">
            <Dictionary v-model="params.reportType"
                        :updata-dict="params.reportType"
                        :dict-key="'REPORT_TYPE'" />
          </el-form-item>
        </el-col>
        <el-col :xs="24"
                :sm="20"
                :md="4"
                :lg="4"
                :xl="4">
          <el-button type="primary"
                     @click="search('form')">{{ $t('btn.query') }}</el-button>
          <el-button type="danger"
                     @click="reset('form')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary"
               icon="el-icon-plus"
               @click="showAddReportModel()">{{ $t('btn.add') }}</el-button>

    <!--表格渲染-->
    <el-table v-loading="listLoading"
              border
              :data="list"
              element-loading-text="Loading"
              style="width: 100%">
      <el-table-column align="center"
                       :label="tf('id')"
                       type="index"
                       min-width="40" />
      <el-table-column :label="tf('reportType')">
        <template slot-scope="scope">
          {{scope.row.reportType | reportTableType}}
        </template>
      </el-table-column>
      <el-table-column prop="reportName"
                       :label="tf('reportName')" />
      <el-table-column prop="reportCode"
                       :label="tf('reportCode')" />
      <el-table-column prop="reportGroup"
                       :label="tf('reportGroup')">
        <template slot-scope="scope">
          {{scope.row.reportGroup | filterPushType}}
        </template>
      </el-table-column>
      <el-table-column prop="reportDesc"
                       :label="tf('reportDesc')" />
      <el-table-column prop="createByView"
                       :label="tf('createBy')" />
      <el-table-column prop="createTime"
                       :label="tf('createTime')" />
      <el-table-column prop="updateByView"
                       :label="tf('updateBy')" />
      <el-table-column prop="updateTime"
                       :label="tf('updateTime')" />
      <el-table-column :label="$t('btn.operationCol')"
                       width="200px"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="preview(scope.row)">{{ $t('btn.preview') }}</el-button>
          <el-button type="text"
                     @click="design(scope.row)">{{ $t('btn.design') }}</el-button>
          <el-button type="text"
                     @click="showAddReportModel(scope.row)">{{ $t('btn.edit') }}</el-button>
          <el-button type="text"
                     @click="del(scope.row)">{{ $t('btn.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination :total="totalCount"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="params.pageSize"
                     :current-page="params.pageNumber"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>
    <!--表单组件-->
    <el-dialog title="项目基础配置"
               width="50%"
               :close-on-click-modal="false"
               center
               :visible.sync="basicDialog"
               @close="closeDialog">
      <el-form ref="userForm"
               :model="dialogForm"
               :rules="rules"
               size="small"
               label-width="100px">
        <el-row :gutter="10">
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6">
            <el-form-item :label="tf('reportType')">
              <el-select v-model="dialogForm.reportType"
                         :placeholder="$t('placeholder.select')"
                         clearable>
                <el-option v-for="item in dictionaryTypeOptions"
                           :key="item.id"
                           :label="item.text"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24"
                  :sm="20"
                  :md="7"
                  :lg="7"
                  :xl="7">
            <el-form-item :label="tf('reportName')"
                          prop="reportName">
              <el-input v-model="dialogForm.reportName" />
            </el-form-item>
          </el-col>
          <el-col :xs="24"
                  :sm="20"
                  :md="7"
                  :lg="7"
                  :xl="7">
            <el-form-item :label="tf('reportCode')"
                          prop="reportCode">
              <el-input v-model="dialogForm.reportCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6">
            <el-form-item :label="tf('reportGroup')">
              <el-select v-model="dialogForm.reportGroup"
                         placeholder="请选择"
                         clearable>
                <el-option v-for="item in dictionaryGroupOptions"
                           :key="item.id"
                           :label="item.text"
                           :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item :label="tf('reportDesc')">
            <el-input v-model="dialogForm.reportDesc"
                      type="textarea"
                      placeholder="请输入内容"
                      show-word-limit />
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="basicDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary"
                   @click="UserConfirm">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataDictionary } from '@/api/common'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import { reportPageList, addReport, editReport, delReport} from '@/api/report'
import Dictionary from '@/components/Dictionary/index'
import i18nHandler from '@/mixins/i18nHandler'
import i18n from '@/lang'
import report from '@/api/report'
const defaultForm = { id: null, reportName: null, reportCode: null, reportType: null, reportGroup: null, reportDesc: null, createTime: null, createByView: null, updateTime: null, updateByView: null }
/** ui国际化初始化参数,菜单模块 menu_code**/
const i18nQry = { module: 'Report', refer: 'gaea_report' }
var typeData
export default {
  name: 'Report',
  components: { Dictionary },

  mixins: [presenter(), header(), form(defaultForm), crud(), i18nHandler],
  cruds () {
    return CRUD({ title: i18n.t('Report.moduleName'), url: 'business/report/pageList', idField: 'id', sort: 'id', order: 'DESC', crudMethod: { ...report } })
  },
  filters: {
    filterPushType (val) {
      for (var i = 0; i < typeData.dictionaryGroupOptions.length; i++) {
        if (typeData.dictionaryGroupOptions[i].id == val) {
          return typeData.dictionaryGroupOptions[i].text
        }
      }
    },
    reportTableType (val) {
      for (var i = 0; i < typeData.dictionaryTypeOptions.length; i++) {
        if (typeData.dictionaryTypeOptions[i].id == val) {
          return typeData.dictionaryTypeOptions[i].text
        }
      }
    },
  },
  data () {
    return {
      params: {
        reportCode: '',
        reportName: '',
        reportType: '',
        pageNumber: 1,
        pageSize: 10,
        order: 'DESC',
        sort: 'update_time',
      },
      dialogForm: {
        reportName: '',
        reportCode: '',
        reportType: '',
        reportGroup: '',
        reportDesc: '',
      },
      basicDialog: false,
      listLoading: true,
      list: null,
      totalCount: 0,
      totalPage: 0,
      dictionaryTypeOptions: [], // 报表类型
      dictionaryGroupOptions: [], // 报表分组
      rules: {},

    }
  },

  mounted () { },
  // 在生命周期 beforeCreate里面改变this指向
  beforeCreate: function () {
    typeData = this
  },
  created () {
    this.$nextTick(() => {
      dataDictionary('REPORT_GROUP').then((res) => {
        this.dictionaryGroupOptions = res.data
        this.dialogForm.reportGroup = this.dictionaryGroupOptions[0].text
      })
      dataDictionary('REPORT_TYPE').then((res) => {
        this.dictionaryTypeOptions = res.data;
        this.dialogForm.reportType = this.dictionaryTypeOptions[0].text
      })
    })
    this.moduleI18nInit(i18nQry)
    this.queryByPage()

  },
  methods: {
    // 查询
    search () {
      this.params.pageNumber = 1
      this.queryByPage()
    },
    // 重置
    reset (formName) {
      this.$refs[formName].resetFields()
      this.params.reportName = ''
      this.params.reportCode = ''
      this.params.reportType = ''
      this.params.pageNumber = 1
      this.queryByPage()
    },
    async queryByPage () {
      const res = await reportPageList(this.params)
      if (res.code != '200') return
      this.listLoading = true
      this.list = res.data.records
      this.list.forEach((value) => {
        value['reportNameCode'] = value.reportName + '[' + value.reportCode + ']'
      })
      this.totalCount = res.data.total
      this.totalPage = res.data.pages
      this.listLoading = false
    },

    // 打开模态框
    showAddReportModel (val) {
      this.basicDialog = true
      if (val === undefined) {
        this.dialogForm = {
          reportName: '',
          reportCode: '',
          reportType: '',
          reportDesc: '',
        }
      } else {
        this.dialogForm = val
      }
    },
    // 预览
    preview (val) {
      if (val.reportType === 'report_excel') {
        var routeUrl = this.$router.resolve({ path: '/report/excelreport/viewer', query: { reportCode: val.reportCode } })
        window.open(routeUrl.href, '_blank')
      } else {
        // eslint-disable-next-line no-redeclare
        var routeUrl = this.$router.resolve({ path: '/report/bigscreen/viewer', query: { reportCode: val.reportCode } })
        window.open(routeUrl.href, '_blank')
      }
    },
    // 设计
    design (val) {
      if (val.reportType === 'report_excel') {
        var routeUrl = this.$router.resolve({ path: '/report/excelreport/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
        window.open(routeUrl.href, '_blank')
      } else {
        // eslint-disable-next-line no-redeclare
        var routeUrl = this.$router.resolve({ path: '/report/bigscreen/designer', query: { reportCode: val.reportCode, reportId: val.id, accessKey: val.accessKey } })
        window.open(routeUrl.href, '_blank')
      }
    },
    // 删除
    async delReport (val) {
      const { code } = await delReport(val)
      if (code != '200') return
      this.queryByPage()
    },
    del (val) {
      this.$confirm('确定删除此条数据, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delReport(val)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    // 关闭模态框
    closeDialog (bool) {
      bool && this.search('form') // 点确定关闭弹窗的时候才会刷新列表
      this.$refs['userForm'].resetFields()
      this.basicDialog = false
    },
    handleSizeChange (val) {
      this.params.pageSize = val
      this.queryByPage()
    },
    handleCurrentChange (val) {
      this.params.pageNumber = val
      this.queryByPage()
    },
    // 提交
    UserConfirm () {
      this.$refs.form.validate(async (valid, obj) => {
        if (valid) {
          if (this.dialogForm.id == undefined) {
            const { code } = await addReport(this.dialogForm)
            if (code != '200') return
          } else {
            const { code } = await editReport(this.dialogForm)
            if (code != '200') return
          }
          this.closeDialog(true)
        } else {
          return
        }
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
